<template>
	<view class="order-btn-bar">
		<view v-if="btnArr.length" class="content">
			<view class="time" v-if="showCountDown&&tickTime.status">
				剩余时间：{{tickTime.hh}}:{{tickTime.MM}}:{{tickTime.ss}}				
			</view>	

			<view class="btn-wrap">
				<template v-for="(btnItem, index) in btnArr" >
					<view 
					class="btn"
					:class="btnItem.type"
					:key="index" 
					@click.stop="handleClick(btnItem)">
						{{btnItem.text}}					
					</view>
				</template>
			</view>		
		</view>
	</view>
</template>
<script>
import countDown from 'utils/helper/count-down'
import { ORDER_STATUS_NAME, ORDER_STATUS, REFUND_STATUS } from '@/model/enum'
export default {
	name: '',
	props: {
		item: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			tickTime: '00:00:00',
			btnArr: [],
			timeCounter: null // 计时器
		}
	},

	computed: {
		showCountDown() {
			return Number(this.item.showPaying) === 1
		}
		// normalBtn() {
		// 	let orderStatus = Number(this.item.orderStatus)
		// 	let refundStatus = Number(this.item.refundStatus)

		// 	switch(this.item.orderStatus){
		// 		case 1: return ['取消订单'];
		// 		default: []
		// 	}
		// },
		// primaryBtn() {
		// 	switch(this.item.orderStatus){
		// 		case 1: return ['立即支付'];
		// 		default: ''
		// 	}
		// }
	},
	created() {
		this.initBtnArr()
		this.initCountDown()
	},
	watch: {
		item(val, oldVal) {
			this.initBtnArr()
			this.initCountDown()
		}
	},
	methods: {
		initCountDown() {
			if (this.timeCounter) { // 防止生成多个计时器相互干扰
				clearInterval(this.timeCounter)
				this.timeCounter = null
			}
			
			if (!this.item.payExpireTime) return

			// 还有剩余支付时间
			if (this.item.payExpireTime > 0) {
				this.timeCounter = countDown(this.item.payExpireTime, 250, (res)=>{
					this.tickTime = res

					if(!res.status) {
						this.$emit('payTimeout')
						let payBtn = this.btnArr.find(item => item.clickEvent === 'click:pay')

						if (payBtn) {
							payBtn.type = 'disabled'
							payBtn.text = '支付超时'
							payBtn.clickEvent = ''
						}
					}
				})
			}
		},

		initBtnArr() {
			let {INIT, REFUNDING, SUCCEED: REFUND_SUCCEED, FAIL: REFUND_FAIL} = REFUND_STATUS
			let {
				UNPAID,
				COMFIRMING,
				SUCCEED,
				FAIL,
				COMPLETE,
				FAIL_AND_CANCELED,
				DISPUTE,
				CANCELING,
				CANCEL_FAIL,
				CANCELED,
				PAY_TIMEOUT,
				CLOSED
				} = ORDER_STATUS

			let btnArr = []
			
			if (Number(this.item.showRefund) === 1) {
				btnArr.push({
					type: 'default',
					text: '退款明细',
					clickEvent: 'click:refund'
				})
			}

			if (Number(this.item.showCancel) === 1) {
				btnArr.push({
					type: 'default',
					text: '取消订单',
					clickEvent: 'click:cancel'
				})
			}

			if (Number(this.item.showVoucher) === 1) {
				btnArr.push({
					type: 'primary',
					text: '入园凭证',
					clickEvent: 'click:voucher'
				})
			}

			if (Number(this.item.showPaying) === 1) {

				if (this.item.payExpireTime > 0) {
					btnArr.push({
						type: 'primary',
						text: '立即支付',
						clickEvent: 'click:pay'
					})
				} else {
					btnArr.push({
						type: 'disabled',
						text: '支付超时',
						clickEvent: ''
					})
				}
			}

			// let orderStatus = Number(this.item.orderStatus)
			// let refundStatus = Number(this.item.refundStatus)

			// let hasRefundInfo = false // 是否是退款订单

			// if ([REFUNDING, REFUND_SUCCEED, REFUND_FAIL].indexOf(refundStatus) >= 0) {
			// 	btnArr.push({
			// 		type: 'default',
			// 		text: '退款明细',
			// 		clickEvent: 'click:refund'
			// 	})
				
			// 	hasRefundInfo = true
			// }

			// if ([UNPAID, COMFIRMING].indexOf(orderStatus) >= 0) {
			// 	btnArr.push({
			// 		type: 'default',
			// 		text: '取消订单',
			// 		clickEvent: 'click:cancel'
			// 	})
			// }

			// // 已申请退款的订单不该显示入园凭证
			// if ([SUCCEED, COMFIRMING].indexOf(orderStatus) >= 0 && !hasRefundInfo) {
			// 	btnArr.push({
			// 		type: 'primary',
			// 		text: '入园凭证',
			// 		clickEvent: 'click:voucher'
			// 	})
			// }

			// if (UNPAID === orderStatus) {
			// 	btnArr.push({
			// 		type: 'primary',
			// 		text: '立即支付',
			// 		clickEvent: 'click:pay'
			// 	})
			// }
			this.btnArr = btnArr
		},
		handleClick(btnItem) {
			if (!btnItem.clickEvent) return

			this.$emit('click', btnItem.clickEvent)
		}
	},
	beforeDestroy() {
		clearInterval(this.timeCounter)
	}
}
</script>
<style lang="less">
.order-btn-bar{
	.content{
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		border-top: 1px solid #FAFAFA;
		.time{
			position: absolute;
			left: 32rpx;
			color: @font_tag_color;
			font-size: 24rpx;
		}
		.btn-wrap{
			display: flex;
			position: absolute;
			right: 12rpx;
			.btn{
				margin-right: 20rpx;
				padding: 10rpx 30rpx;
				border-radius: 39rpx;
				.flex-normal-center;
				color: #1B2431;
				border: 1px solid #E7E7E7;
				&.primary{
					color: #00CBD6;
					border: 1px solid #00CBD6;
				}

				&.disabled {
					color: @font_light_color;
				}
			}
		}
	}
}
</style>